<template>
    <div class="list_r">
      <w-breadcrumb style="font-size: 14px;margin-left:5px;margin-bottom:10px" separator="/">
        <w-breadcrumb-item>订单管理</w-breadcrumb-item>
        <w-breadcrumb-item>订单列表</w-breadcrumb-item>
      </w-breadcrumb>
      <w-tabs type="card" v-model="activeName" @tab-click="handleChangeTag" class="list_tabs">
        <w-tab-pane label="正在进行" name="first">
          <w-table
            class="list_table"
            ref="multipleTable"
            :default-sort="{ prop: 'orderTime', order: 'descending' }"
            :data="
              listList.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            tooltip-effect="dark"
            style="width: 100%"
          >
            <w-table-column prop="id" label="订单号" width="130">
            </w-table-column>
            <w-table-column prop="type" label="货物名称" width="130">
            </w-table-column>
            <w-table-column prop="sendName" label="发件人姓名" width="130">
            </w-table-column>
            <w-table-column prop="sendPhone" label="发件人手机号" width="160">
            </w-table-column>
            <w-table-column prop="status" label="订单状态" width="130">
            </w-table-column>
            <w-table-column
              prop="orderTime"
              label="下单时间"
              width="200"
              sortable
            >
            </w-table-column>
            <w-table-column label="操作">
              <template slot-scope="scope">
                <w-button
                  size="mini"
                  type="danger"
                  @click="handleDetail(scope.row.id)"
                  >详情</w-button
                >
              </template>
            </w-table-column>
          </w-table>
          <w-pagination
            class="list_bottom"
            @current-change="current_change"
            :current-page="currentPage"
            small
            background
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="listList.length"
          >
          </w-pagination>
        </w-tab-pane>
        <w-tab-pane label="已完成" name="second">
          <w-table
            class="list_table"
            ref="multipleTable"
            :default-sort="{ prop: 'finishTime', order: 'descending' }"
            :data="
              completeList.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            tooltip-effect="dark"
            style="width: 100%"
          >
            <w-table-column prop="id" label="订单号"> </w-table-column>
            <w-table-column prop="type" label="货物名称"> </w-table-column>
            <w-table-column prop="sendPhone" label="手机号"> </w-table-column>
            <w-table-column sortable prop="finishTime" label="完成时间"> </w-table-column>
            <w-table-column label="操作">
              <template slot-scope="scope">
                <w-button
                  size="mini"
                  type="danger"
                  @click="handleDetail(scope.row.id)"
                  >详情</w-button
                >
              </template>
            </w-table-column>
          </w-table>
          <w-pagination
            class="list_bottom"
            @current-change="current_change"
            :current-page="currentPage"
            small
            background
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="completeList.length"
          >
          </w-pagination>
        </w-tab-pane>
        <w-tab-pane label="已取消" name="third">
          <w-table
            class="list_table"
            ref="multipleTable"
            :default-sort="{ prop: 'cancelTime', order: 'descending' }"
            :data="
              cancelList.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            tooltip-effect="dark"
            style="width: 100%"
          >
            <w-table-column prop="id" label="订单号"> </w-table-column>
            <w-table-column prop="type" label="货物名称"> </w-table-column>
            <w-table-column prop="sendPhone" label="手机号"> </w-table-column>
            <w-table-column sortable prop="cancelTime" label="取消时间"> </w-table-column>
            <w-table-column label="操作">
              <template slot-scope="scope">
                <w-button
                  size="mini"
                  type="danger"
                  @click="handleDetail(scope.row.id)"
                  >详情</w-button
                >
              </template>
            </w-table-column>
          </w-table>
          <w-pagination
            class="list_bottom"
            @current-change="current_change"
            :current-page="currentPage"
            small
            background
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="cancelList.length"
          >
          </w-pagination>
        </w-tab-pane>
      </w-tabs>
    </div>
</template>

<script>
export default {
  name: "List",
  data() {
    return {
      activeName: "first",
      currentPage: 1,
      pageSize: 6,
      listList: [],
      formLabelWidth: "90px",
      dialogFormVisible: false,
      addFormVisible: false,
      completeList: [],
      cancelList: [],
    };
  },
  methods: {
    current_change(currentPage) {
      this.currentPage = currentPage;
    },
    handleDetail(msg) {
      localStorage.setItem("route", this.$route.path);
      localStorage.setItem("pageNo", this.currentPage);
      localStorage.setItem("active", this.activeName);
      this.$router.push({
        name: "xiangqing",
        query: {
          id: msg,
        },
      });
    },
    getListTable() {
      this.$axios({
        method: "GET",
        url: "http://1.15.170.222:88/api/order/getOnWayOrders",
      }).then((response) => {
        console.log(response);
        this.listList = response.data.data;
      });
      this.$axios({
        method: "GET",
        url: "http://1.15.170.222:88/api/order/getOverOrders",
      }).then((response) => {
        console.log(response);
        this.completeList = response.data.data;
      });
      this.$axios({
        method: "GET",
        url: "http://1.15.170.222:88/api/order/getCanceledOrders",
      }).then((response) => {
        console.log(response);
        this.cancelList = response.data.data;
      });
    },
    handleChangeTag(){
      localStorage.removeItem('pageNo');
      localStorage.removeItem('route');
      localStorage.removeItem("active");
      this.currentPage = 1
    }
  },
  created() {
    this.getListTable();
    let pageNo = localStorage.getItem("pageNo");
    let route = localStorage.getItem("route");
    let active = localStorage.getItem("active");
    if (route === this.$route.path && active === 'second') {
      this.currentPage = Number(pageNo);
      this.activeName = 'second'
    }else if(route === this.$route.path && active === 'first'){
      this.currentPage = Number(pageNo);
      this.activeName = 'first'
    }else if(route === this.$route.path && active === 'third'){
      this.currentPage = Number(pageNo);
      this.activeName = 'third'
    }
    localStorage.removeItem("pageNo");
    localStorage.removeItem("route");
    localStorage.removeItem("active");
  },
};
</script>

<style>
.list_r {
  padding-top: 40px;
  padding-left: 82px;
  display: flex;
  flex-direction: column;
  width: 1050px;
  height: 680px;
}
.list_tabs {
  margin-top: 20px;
}
.list_table {
  margin-bottom: 40px;
  font-size: 14px;
  margin-left: 20px;
}
.list_bottom {
  text-align: center;
}
.list_form {
  height: 360px;
  margin-right: 10px;
}
.el-form-item__content {
  margin-bottom: 10px;
  height: 45px;
}
.el-dialog__header {
  padding-bottom: 1px;
}
.el-dialog__body {
  padding-top: 20px;
}
.dialog-footer {
  text-align: center;
}
</style>
